import React, { Suspense } from "react";
import { connect } from "dva";
import PageLoading from "@/components/PageLoading";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import { Card, Icon, Progress, Modal, Button } from "antd";
import G6 from "@antv/g6";
import TypeNodeInfo from "@/pages/KnowledgeGraph/editDrawer/typeNodeInfo";
import styles from "@/pages/KnowledgeGraph/edit/index.less";
import insertCss from "insert-css";
import AddCategoryModal from "@/pages/KnowledgeGraph/edit/addCategoryModal";
import { saveAndEditerCategoryNode, mappingKnowledgeDomainDetail, removeCategory, knowledgeAtlasTree, } from "@/services/knowledgegraph";
import IntentionsNodeInfo from "@/pages/KnowledgeGraph/editDrawer/intentionsNodeInfo";
import UserSession from "@/UserSession";
import ClassModal from "./classModal";
import SortNode from "./sortNode";
import SkipNode from "../editDrawer/skipNode";

let graph = null;
let selectNode = null;
let item = null;

class GraphMap extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			number: 100,
			atlasId: "",
			addVisible: false,
			addTitle: "新增类别节点",
			showClassModal: false,
			showSortNode: false,
		};
	}

	componentDidMount() {
		const { id, name } = this.props.location.query;
		this.setState({ atlasId: id }, () => {
			this.renderGraph();
		});
	}

	/**
	 * 初始化树图
	 */
	renderGraph = () => {
		/**
		 * 初始化右键菜单--开始
		 */
		insertCss(`
			#contextMenu {
				position: absolute;
				list-style-type: none;
				padding: 0;
				left: -150px;
				background-color: rgba(255, 255, 255,1);
				border-radius: 6px;
				font-size: 12px;
				color: #000000;
				position: absolute;
        		box-shadow: 0px 3px 10px 0px rgba(13,4,8,0.16);
			}
			#contextMenu .addPopoverNode {
				left: 50%;
				-webkit-transform: translateX(-50%) rotate(45deg);
				-ms-transform: translateX(-50%) rotate(45deg);
				transform: translateX(-50%) rotate(45deg);

				top: -4px;
				border-top-color: #fff;
				border-right-color: transparent;
				border-bottom-color: transparent;
				border-left-color: #fff;
				-webkit-box-shadow: -2px -2px 5px rgb(0 0 0 / 6%);
				box-shadow: -2px -2px 5px rgb(0 0 0 / 6%);

				position: absolute;
				display: block;
				width: 8px;
				height: 8px;
				background: 0 0;
				border-style: solid;
				border-width: 4px;
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
			}
			#contextMenu li {
				cursor: pointer;
				list-style-type:none;
				list-style: none;
				margin-left: 0px;
				padding:10px;
				border:none;
				min-width:120px;
			}
			#contextMenu li:hover {
				color: #3E5BFF;
				background: rgba(62, 91, 255, 0.12);
			}
			#contextMenu li .icon {
				width: 16px;
				height: 16px;
				margin-right: 10px;
			}
			.reName {
				display:none;
			}
		`);
		const conextMenuContainer = document.createElement("ul");
		conextMenuContainer.id = "contextMenu";

		// const addPopoverNodeLi = document.createElement("div");
		// addPopoverNodeLi.setAttribute("class", "addPopoverNode");
		// conextMenuContainer.appendChild(addPopoverNodeLi);

		const addClassNodeLi = document.createElement("li");
		addClassNodeLi.setAttribute("class", "addClassNode");

		// const addClassIcon = document.createElement("img");
		// addClassIcon.setAttribute("class", "addNodeIcon icon");
		// addClassIcon.setAttribute("src", "/knowMapImg/addChile.png");
		// addClassNodeLi.appendChild(addClassIcon);
		const text = document.createElement("span");
		text.innerText = "新增类别节点";
		addClassNodeLi.appendChild(text);
		if (!UserSession.isSystemKnowledge()) {
			conextMenuContainer.appendChild(addClassNodeLi);
		};

		const addTodoNodeLi = document.createElement("li");
		// const addFlowIcon = document.createElement("img");
		// addFlowIcon.setAttribute("class", "addNodeIcon icon");
		// addFlowIcon.setAttribute("src", "/knowMapImg/addClass.png");
		// addTodoNodeLi.appendChild(addFlowIcon);
		const todoText = document.createElement("span");
		todoText.innerText = "新增意图节点";
		addTodoNodeLi.appendChild(todoText);
		addTodoNodeLi.setAttribute("class", "addTodoNode");
		if (!UserSession.isSystemKnowledge()) {
			conextMenuContainer.appendChild(addTodoNodeLi);
		};

		const editLi = document.createElement("li");
		// const editIcon = document.createElement("img");
		// editIcon.setAttribute("class", "addNodeIcon icon");
		// editIcon.setAttribute("src", "/knowMapImg/edit.png");
		// editLi.appendChild(editIcon);
		const editText = document.createElement("span");
		editText.innerText = !UserSession.isSystemKnowledge() ? "编辑" : "查看";
		editLi.appendChild(editText);
		editLi.setAttribute("class", "editNode");
		conextMenuContainer.appendChild(editLi);

		const reNameLi = document.createElement("li");
		reNameLi.innerText = "节点重命名";
		reNameLi.setAttribute("class", "reName");
		if (!UserSession.isSystemKnowledge()) {
			conextMenuContainer.appendChild(reNameLi);
		};

		const delLi = document.createElement("li");
		delLi.setAttribute("class", "delNodeBtn");
		// const delIcon = document.createElement("img");
		// delIcon.setAttribute("class", "addNodeIcon icon");
		// delIcon.setAttribute("src", "/knowMapImg/del.png");
		// delLi.appendChild(delIcon);
		const delText = document.createElement("span");
		delText.innerText = "删除";
		delLi.appendChild(delText);
		if (!UserSession.isSystemKnowledge()) {
			conextMenuContainer.appendChild(delLi);
		};

		// 跳转节点
		const skipNodeLi = document.createElement("li");
		// const skipIcon = document.createElement("img");
		// skipIcon.setAttribute("class", "addNodeIcon icon");
		// skipIcon.setAttribute("src", "/knowMapImg/skip.png");
		// skipNodeLi.appendChild(skipIcon);
		const skipText = document.createElement("span");
		skipText.innerText = "新增跳转节点";
		skipNodeLi.appendChild(skipText);
		skipNodeLi.setAttribute("class", "skipNode");

		// 调整顺序
		const sortLi = document.createElement("li");
		sortLi.setAttribute("class", "sortNodeBtn");
		// const sortIcon = document.createElement("img");
		// sortIcon.setAttribute("class", "sortNodeBtn icon");
		// sortIcon.setAttribute("src", "/knowMapImg/sorting.png");
		// sortLi.appendChild(sortIcon);
		const sortText = document.createElement("span");
		sortText.innerText = "调整顺序";
		sortLi.appendChild(sortText);

		if (!UserSession.isSystemKnowledge()) {
			conextMenuContainer.appendChild(sortLi);
			conextMenuContainer.appendChild(skipNodeLi);
		};

		document.getElementById("graphContainer").appendChild(conextMenuContainer);

		/**
		 * 初始化右键菜单--结束
		 */

		/**
		 * 初始化图谱结构--开始
		 */

		const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
			return [
				["M", x - r, y - r],
				["a", r, r, 0, 1, 0, r * 2, 0],
				["a", r, r, 0, 1, 0, -r * 2, 0],
				["M", x + 2 - r, y - r],
				["L", x + r - 2, y - r],
			];
		};
		const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
			return [
				["M", x - r, y - r],
				["a", r, r, 0, 1, 0, r * 2, 0],
				["a", r, r, 0, 1, 0, -r * 2, 0],
				["M", x + 2 - r, y - r],
				["L", x + r - 2, y - r],
				["M", x, y - 2 * r + 2],
				["L", x, y - 2],
			];
		};

		G6.registerEdge("line-arrow", {
			options: {
				style: {
					stroke: "#ccc",
					endArrow: {
						path: 'M 4,0 L -4,-4 L -4,4 Z',
						d: 4
					},
				},
			},
			draw: function draw(cfg, group) {
				const startPoint = cfg.startPoint;
				const endPoint = cfg.endPoint;

				const stroke = (cfg.style && cfg.style.stroke) || this.options.style.stroke;
				const startArrow = (cfg.style && cfg.style.startArrow) || undefined;
				const endArrow = (cfg.style && cfg.style.endArrow) || undefined;

				const keyShape = group.addShape("path", {
					attrs: {
						path: [
							["M", startPoint.x, startPoint.y],
							["L", endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y],
							["L", endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y],
							["L", endPoint.x, endPoint.y],
						],
						stroke,
						lineWidth: 1,
						startArrow,
						endArrow,
					},
					className: "edge-shape",
					name: "edge-shape",
				});
				return keyShape;
			},
		});

		G6.registerNode("tree-node", {
			drawShape: function drawShape(cfg, group) {
				let { nodeColor, name, textColor, childNumber, collapsed, nodeType, label, children, disabled, graphNodeType } = cfg;
				if (name.length > 20) {
					name = name.substring(0, 19) + "...";
				};
				let rect = null;
				let getGraphNodeType = () => {
					let color = '';
					switch (graphNodeType) {
						case 0:
							color = "#3E5BFF";
							break;
						case 1:
							color = "#6D9CF8";
							break;
						case 2:
							color = "#00CA7E";
							break;
						default:
							color = "#E13E1F";
							break;
					};
					return color;
				};
				let getLineDash = () => {
					let lineDash = [];
					switch (graphNodeType) {
						case 0:
							lineDash = 5;
							break;
						case 1:
							lineDash = [5, 5];
							break;
						case 2:
							lineDash = [5, 5];
							break;
						default:
							lineDash = [5, 5];
							break;
					};
					return lineDash;
				};
				rect = group.addShape("rect", {
					attrs: {
						stroke: getGraphNodeType(),
						fill: nodeColor,
						radius: 16,
						cursor: "pointer",
						lineDash: getLineDash(),
						x: 5,
						y: 0,
					},
					name: "rect-shape",
				});

				const content = name.replace(/(.{10})/g, "$1\n");
				const text = group.addShape("text", {
					attrs: {
						text: content,
						// textAlign: 'center',
						textBaseline: 'top',
						fill: textColor,
						fontSize: 14,
						cursor: "pointer",
						// x: disabled && !UserSession.isAdmin() ? 117 : 107,
						x: disabled && !UserSession.isAdmin() ? 34 : graphNodeType == 2 ? 24 : 14,
						y: 12,
					},
					name: "rect-shape",
				});
				const bbox = text.getBBox();
				if (disabled && !UserSession.isAdmin()) {
					group.addShape('image', {
						attrs: {
							x: 10,
							y: bbox.height / 2,
							height: 20,
							width: 20,
							cursor: 'pointer',
							img: staticPath + '/robotConfigImg/jinyong.png',
						},
						name: 'node-icon',
					});
				};
				const hasChildren = nodeType === "root" || nodeType === "category";
				if (hasChildren) {
					group.addShape("marker", {
						attrs: {
							x: bbox.maxX + 30,
							y: disabled && !UserSession.isAdmin() ? (bbox.minX + bbox.height) / 2 : bbox.minX + bbox.height / 2 + 2,
							r: 6,
							symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
							stroke: "#fff",
							lineWidth: 2,
						},
						name: "collapse-icon",
					});
				};
				rect.attr({
					width: disabled && !UserSession.isAdmin() ? bbox.width + (hasChildren ? 81 : 45) : bbox.width + (hasChildren ? 56 : 38),
					height: bbox.height + 20,
				});
				// rect.attr({ width: 200, height: 40 });

				return rect;
			},
		});

		const container = document.getElementById("graphContainer");
		const width = container.scrollWidth;
		const height = container.scrollHeight || 500;
		graph = new G6.TreeGraph({
			container: container,
			width,
			height,
			modes: {
				default: [
					{
						type: "collapse-expand",
						trigger: "click",
						onChange: (item, collapsed) => {
							const data = item.get("model");
							const icon = item.get("group").find((element) => element.get("name") === "collapse-icon");
							if (collapsed) {
								icon.attr("symbol", EXPAND_ICON);
							} else {
								icon.attr("symbol", COLLAPSE_ICON);
							};
							data.collapsed = collapsed;
							return true;
						},
					},
					"drag-canvas",
					{
						type: "zoom-canvas",
						maxZoom: 1,
					},
				],
			},
			defaultNode: {
				type: "tree-node",
				anchorPoints: [
					[0, 0.5],
					[1, 0.5],
				],
			},
			defaultEdge: {
				// type: 'line-arrow',
				type: "cubic-horizontal",
				style: {
					stroke: "#bcc6d0",
				},
			},
			layout: {
				type: "compactBox",
				direction: "LR",
				getId: function getId(d) {
					return d.id;
				},
				getHeight: function getHeight() {
					return 16;
				},
				getWidth: function getWidth() {
					return 180;
				},
				getVGap: function getVGap(d) {
					if (!d.collapsed && d.children.length > 0) {
						return 50;
					};
					return 40;
				},
				getHGap: function getHGap() {
					return 40;
				},
			},
		});

		const that = this;

		that.getGraphInfo();

		/**
		 * 初始化图谱结构--结束
		 */

		/**
		 * 监听树图事件--开始 contextmenu & mouseenter
		 */
		graph.on("node:contextmenu", (evt) => {
			let { nodeType } = evt.item.getModel();
			console.log(evt, nodeType);
			evt.preventDefault();
			evt.stopPropagation();
			if ((nodeType !== undefined && nodeType === "intention") || nodeType === "flow") {
				addClassNodeLi.style.display = "none";
				addTodoNodeLi.style.display = "none";
			} else {
				addClassNodeLi.style.display = "block";
				addTodoNodeLi.style.display = "block";
			};
			if (nodeType == "skip") {
				delLi.style.display = "block";
				addClassNodeLi.style.display = "none";
				addTodoNodeLi.style.display = "none";
				sortLi.style.display = "block";
				skipNodeLi.style.display = "none";
			} else {
				if ((nodeType !== undefined && nodeType === "intention") || nodeType === "flow") {
					addClassNodeLi.style.display = "none";
					addTodoNodeLi.style.display = "none";
					sortLi.style.display = "none";
					skipNodeLi.style.display = "none";
				} else {
					addClassNodeLi.style.display = "block";
					addTodoNodeLi.style.display = "block";
					sortLi.style.display = "block";
					skipNodeLi.style.display = "block";
				};
				if (nodeType === "root") {
					delLi.style.display = "none";
					sortLi.style.display = "none";
				} else {
					delLi.style.display = "block";
					sortLi.style.display = "block";
				}
			};

			conextMenuContainer.style.left = `${evt.originalEvent.offsetX + 40}px`;
			conextMenuContainer.style.top = `${evt.originalEvent.offsetY}px`;
			// conextMenuContainer.style.left = `${evt.originalEvent.originalEvent.offsetX - 32}px`;
			// conextMenuContainer.style.top = `${evt.originalEvent.originalEvent.offsetY + 30}px`;
			selectNode = evt.item.getModel();
			item = evt.item;
		});

		/**
		 * 新增类别节点
		 */
		addClassNodeLi.addEventListener("click", function () {
			that.openAddModal("类别节点", "#3c817b", "#fff");
			conextMenuContainer.style.left = "-150px";
		});
		/**
		 * 新增意图节点
		 */
		addTodoNodeLi.addEventListener("click", function () {
			that.openAddModal("意图节点", "#fff", "#000");
			conextMenuContainer.style.left = "-150px";
		});
		/**
		 * 删除节点
		 */
		delLi.addEventListener("click", function () {
			that.delNode();
			conextMenuContainer.style.left = "-150px";
		});
		/**
		 * 编辑节点
		 */
		editLi.addEventListener("click", function () {
			that.openEditDrawer("#fff", "#000");
			conextMenuContainer.style.left = "-150px";
		});
		/**
		 * 调整顺序
		 */
		sortLi.addEventListener("click", function () {
			that.sortNode();
			conextMenuContainer.style.left = "-150px";
		});
		/**
		 * 新增跳转节点
		 */
		skipNodeLi.addEventListener("click", function () {
			that.openAddModal("跳转节点", "rgba(128, 128, 255, 0.8470588235294118)", "#000");
			conextMenuContainer.style.left = "-150px";
		});
		/**
		 * 点击意图节点
		 */
		graph.on("node:click", (e) => {
			e.preventDefault();
			e.stopPropagation();
			selectNode = e.item.getModel();
			item = e.item;
			if (e.item.getModel().nodeType === "intention" || e.item.getModel().nodeType === "flow") {
				that.openEditDrawer("#fff", "#000");
			}
		});
		/**
		 * 点击画布
		 */
		graph.on("canvas:click", (e) => {
			conextMenuContainer.style.left = "-150px";
			selectNode = null;
			item = null;
		});
		/**
		 * 监听滚轮放大缩小
		 */
		graph.on("wheelzoom", (e) => {
			let number = parseInt(graph.getZoom() * 100);
			if (graph.getZoom() * 1.1 > 1) {
				number = 100;
			};
			that.setState({ number });
		});
		/**
		 * 监听树图事件--结束
		 */

		if (typeof window !== "undefined")
			window.onresize = () => {
				if (!graph || graph.get("destroyed")) return;
				if (!container || !container.scrollWidth || !container.scrollHeight)
					return;
				graph.changeSize(container.scrollWidth, container.scrollHeight);
			};
	};

	/**
	 * 获取图谱数据
	 */
	getGraphInfo = async () => {
		const { atlasId } = this.state;
		const that = this;
		let res = [];
		if (UserSession.isSystemKnowledge()) {
			res = await knowledgeAtlasTree({ atlasId });
			console.log(res);
		} else {
			res = await mappingKnowledgeDomainDetail({
				id: atlasId,
				urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
			});
		};
		G6.Util.traverseTree(res[0], function (item) {
			item.nodeColor = that.fixColor(item.graphNodeType);
			item.textColor = that.fixTextColor(item.graphNodeType);
			item.childNumber = item.children ? item.children.length : 0;
			item.stroke = 'red';
			item.id = item.id ? item.id : item._id;
			item.name = item.title ? item.title : item.nodeName;
			item.nodeType = that.fixNodeType(item.graphNodeType);
			item.collapsed = that.handleNodeCollapsed(item);
		});
		graph.data(res[0]);
		graph.render();
		graph.fitCenter();
	};

	/**
	 * 校验节点颜色
	 * @param nodeType
	 * @returns {string}
	 */
	fixColor = (nodeType) => {
		if (nodeType === 0) {
			return "#3E5BFF";
		};
		if (nodeType === 1) {
			return "#DEE9FF";
		};
		if (nodeType === 3) {
			return "#FAD0C8";
		};
		return "#B3FFE2";
	};

	/**
	 * 校验节点文字颜色
	 * @param nodeType
	 * @returns {string}
	 */
	fixTextColor = (nodeType) => {
		if (nodeType === 1 || nodeType === 2 || nodeType === 3) {
			return "#000000";
		};
		return "#FFFFFF";
	};

	/**
	 * 校验节点类型
	 * @param nodeType
	 * @returns {string}
	 */
	fixNodeType = (nodeType) => {
		if (nodeType === 0) {
			return "root";
		};
		if (nodeType === 1) {
			return "category";
		};
		if (nodeType === 2) {
			return "intention";
		};
		if (nodeType === 3) {
			return "skip";
		};
		return "flow";
	};

	/**
	 * 校验节点是否收起
	 * @param node
	 * @returns {boolean}
	 */
	handleNodeCollapsed = (node) => {
		if (node.nodeType == "category" && node.children && node.children.length > 0) {
			return true;
		}
	};

	/**
	 * 树图居中
	 */
	graphFitCenter = () => {
		graph.fitCenter();
		this.setState({
			number: parseInt(graph.getZoom() * 100),
		});
	};

	/**
	 * 缩小
	 */
	doZoomIn = () => {
		const currentZoom = graph.getZoom();
		graph.zoomTo(currentZoom - 0.1);
		this.setState({
			number: parseInt(graph.getZoom() * 100),
		});
	};

	/**
	 * 放大
	 */
	doZoomOut = () => {
		const currentZoom = graph.getZoom();
		graph.zoomTo(currentZoom + 0.1);
		this.setState({
			number: parseInt(graph.getZoom() * 100),
		});
	};

	/**
	 * 返回
	 */
	goBack = () => {
		window.history.back();
	};

	/**
	 * 打开新增类别节点/意图节点弹窗
	 */
	openAddModal = (title) => {
		this.setState({ addTitle: title, addVisible: true });
	};

	/**
	 * 关闭新增类别节点/意图节点弹窗
	 */
	closeAddModal = () => {
		const { form } = this.formRef.props;
		form.resetFields();
		this.setState({ addVisible: false });
	};

	/**
	 * 新增节点
	 */
	addCategory = () => {
		const { form } = this.formRef.props;
		const { addTitle, atlasId } = this.state;
		const nodeType = addTitle === "类别节点" ? 1 : addTitle === "跳转节点" ? 3 : 2;
		const that = this;
		form.validateFields(async (errors, values) => {
			if (errors) {
				return false;
			};
			let obj = {
				graphNodeType: nodeType,
				atlasId,
				title: values.title,
				parentId: selectNode.id,
			};
			const res = await saveAndEditerCategoryNode(obj);
			if (res.code == 0) {
				let parentData = graph.findDataById(selectNode.id);
				if (!parentData.children) {
					parentData.children = [];
				};
				parentData.children.push({
					nodeName: values.title,
					id: res.data,
					graphNodeType: nodeType,
					children: [],
					nodeColor: that.fixColor(nodeType),
					textColor: that.fixTextColor(nodeType),
					nodeType: that.fixNodeType(nodeType),
					stroke: 'red',
					name: values.title,
					atlasId,
					parentId: selectNode.id,
				});
				graph.changeData();
				that.closeAddModal();
				selectNode = null;
			}
		});
	};

	/**
	 * 删除节点
	 */
	delNode = () => {
		Modal.confirm({
			title: "确定要删除这个节点吗?",
			okText: "确定",
			okType: "danger",
			cancelText: "取消",
			onOk: async () => {
				const res = await removeCategory({ id: selectNode.id });
				graph.removeChild(selectNode.id);
			},
		});
	};

	/**
	 * 打开编辑节点弹窗
	 */
	openEditDrawer = () => {
		if (selectNode.graphNodeType === 1 || selectNode.graphNodeType === 0) {
			this.TypeNodeInfo.openDrawer(item);
		};
		if (selectNode.graphNodeType === 2) {
			this.IntentionsNodeInfo.openDrawer(item);
		};
		if (selectNode.graphNodeType === 3) {
			this.SkipNodeRef.openDrawer(item);
		}
	};

	/**
	 * form
	 * @param formRef
	 */
	saveFormRef = (formRef) => {
		this.formRef = formRef;
	};

	resetNodeTitle = (title, disabled) => {
		if (title) {
			graph.updateItem(item, { name: title, nodeName: title, disabled });
		}
	};

	sortNode = () => {
		this.setState({ showSortNode: true });
		const parentData = graph.findDataById(selectNode.parentId);
		this.SortNodeRef.setData(parentData.children);
	};

	hideSortNode = () => {
		this.setState({ showSortNode: false });
	};

	moveNodeFun = (children) => {
		const parentData = graph.findDataById(selectNode.parentId);
		parentData.children = children;
		graph.updateItem(parentData.id, { children });
		graph.changeData();
	};

	render() {
		const { number, atlasId, addVisible, addTitle } = this.state;
		const { match: { params: { id } }, location: { query: { name, categoryId } } } = this.props;

		return (
			<Suspense fallback={<PageLoading />}>
				<div>
					<div style={{ padding: "10px", display: "flex", justifyContent: "space-between", alignItems: "center", background: "#FFFFFF", height: 60, }}>
						<div style={{ paddingLeft: 13 }}>
							{name}
							{/* 系统知识库不显示移动分类 */}
							{!UserSession.isSystemKnowledge() && (
								<Icon
									type="menu"
									style={{ marginLeft: 10, cursor: "pointer" }}
									onClick={() => this.setState({ showClassModal: true })}
								/>
							)}
						</div>
						{/* <div
							onClick={this.goBack}
							style={{
								cursor: "pointer",
								width: 69,
								height: 32,
								border: "1px solid #D9D9D9",
								borderRadius: 4,
								background: "white",
								textAlign: "center",
								lineHeight: "32px",
							}}
						>
							<Icon type='rollback' style={{ marginRight: 10 }} />
							返回
						</div> */}
						<Button onClick={this.goBack} icon="arrow-left">返回</Button>
					</div>
					<Card className={styles.graphCard}>
						<div style={{ position: "absolute", top: 10, left: 10 }}>
							<div style={{ display: "flex" }}>
								<div className={styles.graphNode}>
									<div className={styles.item}>
										<div style={{ width: 24, height: 14, background: '#3E5BFF', float: "left", marginRight: 10, borderRadius: 7, }} />
										<div>根节点</div>
									</div>
									<div className={styles.item}>
										<div style={{ width: 24, height: 14, background: '#DEE9FF', border: '1px dashed #6D9CF8', float: "left", marginRight: 10, borderRadius: 7, }} />
										<div>类别节点</div>
									</div>
									<div className={styles.item}>
										<div style={{ width: 24, height: 14, background: '#B9F2DD', border: '1px dashed #00CA7E', float: "left", marginRight: 10, borderRadius: 7, }} />
										<div>意图节点</div>
									</div>
									<div className={styles.item}>
										<div style={{ width: 24, height: 14, background: '#FAD0C8', border: '1px dashed #E13E1F', float: "left", marginRight: 10, borderRadius: 7, }} />
										<div>跳转节点</div>
									</div>
								</div>
								<div className={"clearfix"}>
									<div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
										<div style={{ height: '23px', display: 'flex', alignItems: 'center' }}>
											<img src={`/knowMapImg/am.png`} style={{ width: 16 }} onClick={number === 100 ? null : this.doZoomOut} />
										</div>
										<div style={{ height: '23px', display: 'flex', alignItems: 'center', width: 200, margin: "1px 10px 7px" }}>
											<Progress percent={number} showInfo={false} strokeColor="#3E5BFF" />
										</div>
										<div style={{ height: '23px', display: 'flex', alignItems: 'center' }}>
											<img src={`/knowMapImg/re.png`} style={{ width: 16 }} onClick={number === 20 ? null : this.doZoomIn} />
										</div>
										<div style={{ height: '23px', display: 'flex', alignItems: 'center', marginLeft: 10, cursor: "pointer" }} onClick={this.graphFitCenter}>
											<img src={`/knowMapImg/fp.png`} style={{ width: 16 }} />
										</div>
									</div>
								</div>
							</div>
						</div>

						<div id={"graphContainer"} style={{ height: "calc(100vh - 272px)", width: "100%" }}></div>
						<AddCategoryModal
							wrappedComponentRef={this.saveFormRef}
							visible={addVisible}
							onCancel={this.closeAddModal}
							onCreate={this.addCategory}
							label={addTitle}
							val={""}
							pathId={id}
						/>
						<TypeNodeInfo
							onRef={(ref) => (this.TypeNodeInfo = ref)}
							resetNodeTitle={this.resetNodeTitle}
							atlasId={atlasId}
							pathId={id}
						/>
						<IntentionsNodeInfo
							onRef={(ref) => (this.IntentionsNodeInfo = ref)}
							resetNodeTitle={this.resetNodeTitle}
							atlasId={atlasId}
							pathId={id}
						/>
						<ClassModal
							id={id}
							atlasId={this.props.location.query.id}
							visible={this.state.showClassModal}
							dispatch={this.props.dispatch}
							categoryId={categoryId}
							handleCancel={() => {
								this.setState({ showClassModal: false });
							}}
						/>
						<SortNode
							visible={this.state.showSortNode}
							data={selectNode}
							onCancel={this.hideSortNode}
							moveNodeFun={this.moveNodeFun}
							onRef={(ref) => (this.SortNodeRef = ref)}
						/>
						<SkipNode
							onRef={(ref) => (this.SkipNodeRef = ref)}
							resetNodeTitle={this.resetNodeTitle}
							rootCategoryId={id}
						/>
					</Card>
				</div>
			</Suspense>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(GraphMap);
